<template>
    <view class="step-container">
        <view :class="enableClass">
            <text>{{ stepNumber }}</text>
        </view>
        <text :class="textEnableClass">{{ stepText }}</text>
    </view>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue';
const props = defineProps({
    stepNumber: [String, Number],
    stepText: String,
    enable: Boolean
});
const enableClass = ref('');
const textEnableClass = ref('');
onMounted(() => {
    if (props.enable) {
        enableClass.value = 'step-number-container step-number-enable-container';
        textEnableClass.value = 'text-enable';
    } else {
        enableClass.value = 'step-number-container step-number-disable-container';
        textEnableClass.value = 'text-disable';
    }
});
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.step-container {
    @extend .column-layout;
    justify-content: center;
    align-items: center;
    width: auto;
    .step-number-container {
        @extend .column-layout;
        justify-content: center;
        align-items: center;
        width: $scale * 50rpx;
        height: $scale * 50rpx;
        border-radius: $scale * 25rpx;
        margin-bottom: $scale * 10rpx;
        text {
            color: white;
            width: $scale * 40rpx;
            height: $scale * 40rpx;
            border-radius: $scale * 20rpx;
            text-align: center;
            line-height: $scale * 40rpx;
            font-size: $scale * 20rpx;
        }
    }
    .step-number-enable-container {
        border: $scale * 1rpx solid #437eff;
        text {
            background-color: #437eff;
        }
    }
    .step-number-disable-container {
        border: $scale * 1rpx solid #96b7ff;
        text {
            background-color: #96b7ff;
        }
    }
    text {
        font-size: $scale * 18rpx;
        font-weight: bold;
    }
    .text-enable {
        color: #002c8c;
    }
    .text-disable {
        color: #96b7ff;
    }
}
</style>
